<template>
  <el-input :placeholder="$t('select')"
            :class="['quick-filter-search',{
              'quick-filter-search--focus':isFocus
            }]"
            clearable
            @focus="isFocus = true"
            @blur="isFocus =false"
            v-model="currentValue">
    <i class="el-input__icon el-icon-search cursor-pointer"
       slot="suffix"
       @click="isFocus = !isFocus">
    </i>
  </el-input>
</template>

<script>
export default {
  name: 'QuickFilterSearch',
  props: {
    value: {
      type: String
    }
  },
  data () {
    return {
      isFocus: false
    }
  },
  computed: {
    currentValue: {
      get () {
        return this.value
      },
      set (val) {
        this.$emit('input', val)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.quick-filter-search {
  transition: width 100ms ease-in-out;
  width: 48px;
  height: 32px;
  margin-right: 10px;
  &--focus {
    width: 148px;
  }
}
</style>
